{% extends 'mac_basic.html' %}
{% load static %}

{% block title %}
    MAC首页
{% endblock %}


{% block meta %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'search/css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'search/css/style.css' %}">
{% endblock %}


{% block content %}
    <div class="searchbox">
    <div class="mod_select">
        <div class="select_box">
            <span class="select_txt">用户</span>
            <span class="select-icon"></span>
            <ul class="option">
                <li>用户</li>
                <li>产品</li>
                <li>MAC记录</li>
            </ul>
        </div>
    </div>
    <form method="post" action="{% url 'user_list' %}" >
        <input type="hidden" name="" value="服装" id="select_value">
        <input type="text" name="search" id="searchPlaceholder" class="import" placeholder="请输入用户关键字">
        <input type="submit" value="搜   索" class="btn-search">
    </form>
  </div>
{% endblock %}


{% block js %}
    <script>
    $(function(){
        $(".select_box").click(function(event){
            event.stopPropagation();
            $(this).find(".option").toggle();
            $(this).parent().siblings().find(".option").hide();
        });
        $(document).click(function(event){
            var eo=$(event.target);
            if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
            $('.option').hide();
        });
        $(".option li").click(function(){
            var check_value=$(this).text();
            var zlValue = $('.option li:eq(1)').html();
            var bqValue = $('.option li:eq(2)').html();
            $(this).parent().siblings(".select_txt").text(check_value);
            $("#select_value").val(check_value);
            if(check_value == zlValue) {
                $('#searchPlaceholder').prop('placeholder','请输入产品关键字');
            }else if(check_value == bqValue) {
                $('#searchPlaceholder').prop('placeholder','请输入MAC关键字');
            }else {
                $('#searchPlaceholder').prop('placeholder','请输入用户关键字');
            }
        });
    })
    $('.option li').click(function () {
        var url
        var text = $(this).text()
        if (text==='用户'){
            url = '/user_list/'
        }else if(text==='产品'){
            url = '/product_list/'
        }else {
            url = '/download_details/'
        }
        $('form').attr('action', url)
    })
  </script>
{% endblock %}
